<template>
  <div >
    <h1 style="width:100%;text-align:left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上海市浦东新区城市管理行政执法局现场检查笔录（二）</h1>
    <el-form ref="form" :model="form" label-width="220px" style="width: 55%; padding: 0 30px;">

      <el-form-item label="检查地点：">
        <el-input v-model="form.inspectArea"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="block">
          <span class="demonstration">询问时间：</span>
          <el-date-picker
            v-model="value1"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
          <span class="demonstration">至</span>
          <el-date-picker
            v-model="value2"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="当事人：">
        <el-input v-model="form.litigant"></el-input>
      </el-form-item>
      <el-form-item label="身份证号码（统一社会信用代码）：">
        <el-input v-model="form.IDCard"></el-input>
      </el-form-item>
      <el-form-item label="电话：">
        <td>
          <el-input v-model="form.telephone"></el-input>
        </td>
        <td> &nbsp;&nbsp;地址：&nbsp;</td>
        <td>
          <el-input v-model="form.contactAddress"></el-input>
        </td>
      </el-form-item>
      <el-form-item label="在场人：">
        <td>
          <el-input v-model="form.present"></el-input>
        </td>
        <td> &nbsp;&nbsp;职务：&nbsp;</td>
        <td>
          <el-input v-model="form.position"></el-input>
        </td>
        <td> &nbsp;&nbsp;电话：&nbsp;</td>
        <td>
          <el-input v-model="form.presentTelephone"></el-input>
        </td>
      </el-form-item>

      <el-form-item label="检查人员：">
        <td>
          <el-input v-model="form.inspector"></el-input>
        </td>
        <td>&nbsp;&nbsp;记录人员：&nbsp;&nbsp;</td>
        <td>
          <el-input v-model="form.recorder"></el-input>
        </td>
      </el-form-item>
      <el-form-item label="">

        <p>
          现场检查情况（城管执法人员向当事人出示执法证件，并告知其有申请回避的权利和如实回答询问，提供有关资料，协助调查并不得阻挠的义务）：
        </p>
        <p>
          城管执法人员当场告知当事人：你（单位）的行为违反了《 <input type="text" v-model="form.one"> 》第
          <input type="text" v-model="form.two">条第
          <input type="text" v-model="form.three">款第
          <input type="text" v-model ="form.four"> 项的规定，依据《
          <input type="text" v-model ="form.five"> 》第
          <input type="text" v-model ="form.six"> 条第
          <input type="text" v-model ="form.seven">  款第
          <input type="text" v-model ="form.eight">  项的规定，将依法暂扣
          <input type="text" v-model ="form.nine">  。你（单位）享有陈述、申辩的权利。</p>
        <p>当事人辩称： <input type="text" v-model ="form.ten">
        </p>
        <p>附件：</p>
        <p>1、现场情况示意图；</p>
        <p>2、现场照片<input type="text" v-model="form.count">张；</p>
        <p>现场摄像<input type="text" v-model="form.min">分钟。 </p>
      </el-form-item>

      <el-form-item label="当事人（在场人）签名：">

        <td>
          <el-input type="input" v-model="form.presentSign"></el-input>
        </td>
        <td>&nbsp;&nbsp;见证人签名：&nbsp;&nbsp;</td>
        <td>
          <el-input v-model="form.witnessSign"></el-input>
        </td>
      </el-form-item>
      <el-form-item label="检查人员签名：">

        <td>
          <el-input type="input" v-model="form.inspectorSign"></el-input>
        </td>
        <td>&nbsp;&nbsp;记录人员签名：&nbsp;&nbsp;</td>
        <td>
          <el-input v-model="form.recorderSign"></el-input>
        </td>
      </el-form-item>

    </el-form>
    <!--    <button @click="exportclick(form)">点击导出文件</button>-->
    <el-button class="filter-item" size="small" type="primary" icon="el-icon-download" @click="exportclick(form)">
      导出4
    </el-button>
  </div>
</template>

<script>
    import docxtemplater from 'docxtemplater'
    import PizZip from 'pizzip'
    import JSZipUtils from 'jszip-utils'
    import {
        saveAs
    } from 'file-saver'

    export default {
        name: 'Demo4',
        data() {
            return {
                form: {
                    remark: "上海市浦东新区城市管理行政执法局现场检查笔录（二）",
                    inspectArea: '',
                    yearVal: '',
                    monthVal: '',
                    dayVal: '',
                    hourStartVal: '',
                    minStartVal: '',
                    hourEndVal: '',
                    minEndVal: '',
                    litigant: '',
                    telephone: '',
                    IDCard: '',
                    contactAddress: '',
                    present: '',
                    position: '',
                    presentTelephone: '',
                    inspector: '',
                    recorder: '',
                    count: '',
                    min: '',
                    one: '',
                    two: '',
                    three: '',
                    four: '',
                    five: '',
                    six: '',
                    seven: '',
                    eight: '',
                    nine: '',
                    ten: '',
                    presentSign: '',
                    witnessSign: '',
                    inspectorSign: '',
                    recorderSign: ''

                },
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                value1: '',
                value2: '',
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            formatterDate(date) {
                if (!date) {
                    return "";
                }
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                var hours = date.getHours();
                var minutes = date.getMinutes();

                if (month < 10) {
                    month = "0" + month;
                }
                if (day < 10) {
                    day = "0" + day;
                }
                var nowDate = year + "年" + month + "月" + day + "日"+ hours + "时"+ minutes + "分";
                return nowDate;
            },
            exportclick(e) {
                console.log(e)
                let docxsrc = "../../static/4.docx"; //模板文件的位置
                let docxname = e.remark; //导出文件的名字
                const _this = this
                _this.datetime1 = this.formatterDate(this.value1);
                _this.datetime2 = this.formatterDate(this.value2);
                // 读取并获得模板文件的二进制内容
                JSZipUtils.getBinaryContent(docxsrc, function (error, content) {
                    // docxsrc是模板。我们在导出的时候，会根据此模板来导出对应的数据
                    // 抛出异常
                    if (error) {
                        throw error;
                    }

                    // 创建一个PizZip实例，内容为模板的内容
                    let zip = new PizZip(content);
                    // 创建并加载docx templater实例对象
                    let doc = new docxtemplater().loadZip(zip);
                    // 设置模板变量的值
                    doc.setData({
                        ...e, // e中的数据可以再模板中直接使用
                        datetime1: _this.datetime1,
                        datetime2: _this.datetime2,

                    });

                    try {
                        // 用模板变量的值替换所有模板变量
                        doc.render();
                    } catch (error) {
                        // 抛出异常
                        let e = {
                            message: error.message,
                            name: error.name,
                            stack: error.stack,
                            properties: error.properties
                        };
                        console.log(JSON.stringify({
                            error: e
                        }));
                        throw error;
                    }

                    // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
                    let out = doc.getZip().generate({
                        type: "blob",
                        mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                    });
                    // 将目标文件对象保存为目标类型的文件，并命名
                    saveAs(out, docxname);
                });
            }
        }
    }
</script>

<style>
</style>
